$firstDoll:hsl(0deg,50%,50%);
$secondDoll:hsl(60deg,50%,50%);
$thirdDoll:hsl(120deg,50%,50%);
$fourthDoll:hsl(180deg,50%,50%);
$fivethDoll:hsl(240deg,50%,50%);
$sixthDoll:hsl(300deg,50%,50%);

body {
  background-color: black;
  position: relative;
  height: 100%;
  width: 100%;
  .container {
    display: inline-block;
    position: absolute;
    width: 400px;
    height: 400px;
    background-color: aqua;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0  auto;
    .ball {
      width: 10px;
      height: 10px;
      margin: 10px auto;
      border-radius: 50px;
    }

    .ball:nth-child(1) {
      background: $firstDoll;
      -webkit-animation: left 0.9s infinite ease-in-out;
      -moz-animation: left 0.9s infinite ease-in-out;
      animation: left 0.9s infinite ease-in-out;
    }

    .ball:nth-child(2) {
      background: $secondDoll;
      -webkit-animation: left 1s infinite ease-in-out;
      -moz-animation: left 1s infinite ease-in-out;
      animation: left 1s infinite ease-in-out;
    }

    .ball:nth-child(3) {
      background: $thirdDoll;
      -webkit-animation: right 0.9s infinite ease-in-out;
      -moz-animation: right 0.9s infinite ease-in-out;
      animation: right 0.9s infinite ease-in-out;
    }

    .ball:nth-child(4) {
      background:$fourthDoll;
      -webkit-animation: right 1s infinite ease-in-out;
      -moz-animation: right 1s infinite ease-in-out;
      animation: right 1s infinite ease-in-out;
    }

    .ball:nth-child(5) {
      background: $fivethDoll;
      -webkit-animation: left 0.9s infinite ease-in-out;
      -moz-animation: left 0.9s  infinite ease-in-out;
      animation: left 0.9s  infinite ease-in-out;
    }

    .ball:nth-child(6) {
      background: $sixthDoll;
      -webkit-animation: left 1s infinite ease-in-out;
      -moz-animation: left 1s infinite ease-in-out;
      animation: left 1s infinite ease-in-out;
    }



    @-webkit-keyframes right {
      0% {
        -webkit-transform: translate(-15px);
      }
      50% {
        -webkit-transform: translate(15px);
      }
      100% {
        -webkit-transform: translate(-15px);
      }
    }

    @-webkit-keyframes left {
      0% {
        -webkit-transform: translate(15px);
      }
      50% {
        -webkit-transform: translate(-15px);
      }
      100% {
        -webkit-transform: translate(15px);
      }
    }

    @-moz-keyframes right {
      0% {
        -moz-transform: translate(-15px);
      }
      50% {
        -moz-transform: translate(15px);
      }
      100% {
        -moz-transform: translate(-15px);
      }
    }

    @-moz-keyframes left {
      0% {
        -moz-transform: translate(15px);
      }
      50% {
        -moz-transform: translate(-15px);
      }
      100% {
        -moz-transform: translate(15px);
      }
    }

    @keyframes right {
      0% {
        transform: translate(-15px);
      }
      50% {
        transform: translate(15px);
      }
      100% {
        transform: translate(-15px);
      }
    }

    /*定义了*/
    @keyframes left {
      0% {
        transform: translate(15px);
      }
      50% {
        transform: translate(-15px);
      }
      100% {
        transform: translate(15px);
      }
    }
  }
}
